<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
		<link rel="stylesheet" href="__CSS__/admin.css" media="all">
	</head>
    <style type="text/css">
		.payment_erweima canvas{width: 150px; height: 150px;}
		body {overflow:scroll; overflow-y:hidden;}
		.down_btn{width: 87%; margin: 0 auto; height: 2rem; font-weight: bold; line-height: 2rem; text-align: center; font-size: 1.1rem; background: url(__AGENT__/img/bac_fukuan.jpg) no-repeat; background-size: 100% auto; color: white;} 
        .ewm{
        	position: fixed;
        	width: 700px;
        	height: 400px;
        	background:url('/static/admin/images/ft.png') no-repeat center top;
        	border: 1px solid white;
        	background-size: 600px 350px; 
        	margin-top: 30px;
        }
        #qrcode{
        	margin-left: 100px;
        	margin-top: 130px;
        }
        .centent{
        	margin-left: 270px;
        	margin-top: -120px;
        	font-size: 1.5rem;
        }
        .centent p{
        	margin-bottom: 30px;
        }
        .xz{   
        	position: relative; 
		    width: 140px;
		    height: 40px; 
		    background-color: rgba(43, 182, 246, 1);
		    border: none;
		    border-radius: 14px;  
		    margin-left: 270px;
		    color: white;
		     top: 430px;
		}
       .xia{
	       	position: relative; 
	       	top: 10px;
	       	left: 50px;
       }
    </style>
	<body> 
		<div class="ewm">
			<div class="payment_erweima">
				<div id="qrcode"></div> 
			</div>
			<div class="centent">
				<p>{$name}</p>
				<p>{$number}</p>
			</div>  
		</div> 
		<div class="xz">
			<div class="xia" onclick="savepic()">下载</div>
		</div>
		<div id ='cut_img'></div>
	</body>

</html>
{include file="public/foot"}
<script src="__JS__/jquery.qrcode.js"></script>
<script src="__JS__/utf.js"></script> 
<script type="text/javascript" src="__JS__/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__JS__/html2canvas.js'></script>
<script> 
	var url = " ";
	var img = " ";
	 $("#qrcode").qrcode({
        render 		: "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: "{$url}",    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "150",    	//二维码的宽度
        height 		: "150",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
    });
</script>
<script>
//下载图片
function savepic() {
	html2canvas($(".ewm"), {
		onrendered: function (canvas) {
		    var url = canvas.toDataURL(); //base64数据
		    var image = new Image();
		    image.src = url;
		    image.id = 'div_img';
		    $('#cut_img').append(image);
		    var img_src = $('#div_img')[0].src;
				var type = 'png';
				// 下载后的问题名
				var filename = 'pic_' + (new Date()).getTime() + '.' + type;
				// download
				saveFile(img_src,filename);
		   }
		});
}

/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>